<template>
    <div class="comment">
        <p class="comment-title">
            <span>评论</span>
            <span>({{dataLength}})</span>
        </p>
        <div class="commentMyinfo">
            <img :src="user.img" v-if="user.img!=null">
            <img src="src/assets/default_img.jpg" v-else>
            <input v-model="comment" ref="Postipt" type="text" placehoder="说点什么吧"/>
            <button @click="cmmentPublish">发表</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['dataLength'],
        name: "CommentTitle",
        data() {
            return {
                user: {
                    img: null
                },
                comment: ""
            }
        },
        methods: {
            async loadUserInfo() {
                const res = await this.$http.get("/userinfo")
                const user = res.data.data
                this.user = user
                if (res.data.data.img) {
                    // user.img = this.$http.baseURL + "/" + res.data.data.img
                    user.img = res.data.data.img

                    if (res.data.data.background) {
                        // user.background = this.$http.baseURL + "/" + res.data.data.background
                        user.background = res.data.data.background

                        localStorage.setItem("user", user.toString())
                    } else {
                        localStorage.setItem("user", user.toString())
                    }
                }

                localStorage.setItem("user", JSON.stringify(user))
            },
            cmmentPublish() {
                this.$emit('Postcomment', this.comment)
                this.comment = ''
            },
            focusIpt() {
                this.$refs.Postipt.focus()
            }
        },
        mounted: function () {
            this.loadUserInfo()
        }
    }
</script>

<style lang="less" scoped>
    .comment {
        padding: 8.333vw 2.778vw 0 2.7778vw;

        .comment-title {
            span:nth-child(2) {
                color: #aaa;
                margin-left: 2.778vw;
            }
        }

        .commentMyinfo {
            padding: 2.778vw 0;
            display: flex;

            img {
                height: 7.944vw;
                width: 7.944vw;
                border-radius: 50%;
            }

            input {
                outline: none;
                border: 0;
                background-color: #f4f4f4;
                border-radius: 3.611vw;
                font-size: 3.333vw;
                padding: 0 5.556vw 0 4.167vw;
                margin-left: 2.778vw;
            }

            button {
                outline: none;
                border: 0;
                border-radius: 3.333vw;
                background: #fb7299;
                color: white;
                font-size: 3.333vw;
                padding: 0 4.167vw;
            }
        }
    }
</style>